<template>
	<el-dialog v-model="props.show" @close="close" width="460" close-icon="CloseBold">
		<template #default>
			<h2 class="text-#000000">安全验证要求</h2>
			<p class="text-18px text-#000000 mt-20px mb-20px">请输入您的支付密码</p>
			<p class="text-14px text-#86909C">支付密码</p>
			<div class="input-group mt-10px flex items-center justify-between">
				
					<div>
						<el-input maxlength="1" minlength="1"
						v-model="password.p1" type="password"></el-input>
					</div>
					<div>
						<el-input maxlength="1" minlength="1"
						v-model="password.p2" type="password"></el-input>
					</div>
					<div>
						<el-input maxlength="1" minlength="1"
						v-model="password.p3" type="password"></el-input>
					</div>
					<div>
						<el-input maxlength="1" minlength="1"
						v-model="password.p4" type="password"></el-input>
					</div>
					<div>
						<el-input maxlength="1" minlength="1"
						v-model="password.p5" type="password"></el-input>
					</div>
					<div>
						<el-input maxlength="1" minlength="1"
						v-model="password.p6" type="password"></el-input>
					</div>
			</div>
			<p class="text-#114CEE text-14px flex justify-center mb-70px mt-20px">忘记支付密码？</p>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
interface IProps {
	show: boolean;
}
const emits = defineEmits(['close']);
const props = defineProps<IProps>();
const close = () => {
	emits('close', false);
}

const password = ref({
	p1:'',
	p2:'',
	p3:'',
	p4:'',
	p5:'',
	p6:''
});
</script>
<style lang="scss" scoped>
::v-deep .el-input__wrapper{
	padding: 10px;
	height: 30px;
	width: 36px;
}
::v-deep .el-input__inner{
	text-align: center;
}
</style>
